<script setup>
  import { ref, onMounted } from 'vue'
  // import { onLoad } from '@dcloudio/uni-app'
  import { getTaskList } from '@/apis/task'
  import { toast } from '@/utils/utils.js'

  const list = ref([])
  const pages = ref(0)
  const page = ref(1)

  const loadData = async () => {
    const res = await getTaskList({
      page: page.value,
      pageSize: 10,
      status: 1,
    })

    // 异常情况处理
    if (!res.data.items) {
      res.data.items = []
    }

    // 模拟数据
    // const first = res.data.items[0]
    // for (let i = 0; i < 10; i++) {
    //   res.data.items.push({ ...first, enablePickUp: i % 2 === 0 })
    // }

    // res.data.items.forEach()
    for (const v of res.data.items) {
      v.__delayed =
        (v.actualDepartureTime ? new Date(v.actualDepartureTime).getTime() : Date.now()) >
        new Date(v.planDepartureTime).getTime()
    }

    list.value.push(...res.data.items)
    pages.value = res.data.pages
  }

  onMounted(() => {
    loadData()
  })

  const onScrollToLower = () => {
    // 1. 判断是否还有更多：当前页码 < 总页码
    // 2. 让当前页码+1
    // 3. 发个请求

    if (page.value >= pages.value) return toast('没有更多了')

    page.value++

    loadData()
  }

  const refreshing = ref(false)
  const onRefresh = async () => {
    refreshing.value = true
    page.value = 1
    list.value = []
    await loadData()
    refreshing.value = false
  }
</script>

<template>
  <scroll-view
    scroll-y
    refresher-enabled
    class="scroll-view"
    @scrolltolower="onScrollToLower"
    :refresher-triggered="refreshing"
    @refresherrefresh="onRefresh"
  >
    <view class="scroll-view-wrapper">
      <view v-for="v of list" :key="v.id" class="task-card">
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${v.id}`">
          <view class="header">
            <text class="no">任务编号: {{ v.transportTaskId }}</text>
            <text v-if="v.__delayed" class="status">已延迟</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ v.startAddress }}</view>
              <view class="line">{{ v.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ v.planDepartureTime }}</view>
          <navigator v-if="v.enablePickUp" hover-class="none" url="/subpkg_task/pickup/index" class="action"
            >提货</navigator
          >
          <button v-else disabled class="action">提货</button>
        </view>
      </view>
      <!-- <view class="task-card">
        <navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
          <view class="header">
            <text class="no">任务编号: XAHH1234567</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">北京市昌平区回龙观街道西三旗桥东金燕龙写字楼8877号</view>
              <view class="line">河南省郑州市路北区北清路99号</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">2022.05.04 13:00</view>
          <button disabled class="action">提货</button>
        </view>
      </view> -->
      <view v-if="list.length === 0" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
